<template>
	<view class="fission_reward_details">
		<view class="head_view">
			<view class="menuView">
				<view class="settl_view ed" @click="changeSettlEvent(1)" :class="is_settlement === 1 ? 'native' :'normal'">
					<view class="money">￥{{info.settled}}</view>
					<view class="num" :class="is_settlement === 1 ? 'native' :'normal'">已结算</view>
					<view class="triangle" v-if="is_settlement === 1"></view>
				</view>
				<view class="settl_view ing" @click="changeSettlEvent(0)" :class="is_settlement === 0 ? 'native' :'normal'">
					<view class="money">￥{{info.unsettled}}</view>
					<view class="num" :class="is_settlement === 0 ? 'native' :'normal'">结算中</view>
					<view class="triangle" v-if="is_settlement === 0"></view>
				</view>
			</view>
		</view>
		<mescroll-uni @getData="getListData" @init="mescrollInit" class="member-point" ref="mescroll" :top="200">
			<view slot="list">
				<block v-if="listData.length > 0">
					<view class="content">
						<view class="item" v-for="(item,index) in listData" :key="index">
							<view class="info_view">
								<image :src="item.headimg ? $util.img(item.headimg) : $util.getDefaultImage().default_headimg"></image>
								<view class="view1">
									<view class="info_name">{{item.fenxiao_name}}</view>
									<view class="info_up">订单号码:{{item.order_no}}</view>
									<view class="info_up">上级:{{item.parent_name}}</view>
								</view>
							</view>
							<view class="reward_view">
								<view class="money_view">+{{item.commission}}</view>
								<view class="time_view">金额:{{item.amount}}</view>
								<view class="time_view">{{$util.timeStampTurnTime(item.create_time)}}</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<ns-empty text="暂无相关数据" :isIndex="!1"></ns-empty>
				</block>
			</view>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_settlement: 1, //1-已结算；0-结算中
				mescroll:null,
				listData:[],
				info:{
					unsettled:'',
					settled:''
				}
			}
		},
		methods: {
			/* 切换结算状态 */
			changeSettlEvent(state) {
				this.is_settlement = state
				this.mescroll.resetUpScroll()
			},
			/* 获取列表数据 */
			getListData(mescroll){
				if (mescroll.num == 1) {
					this.listData = [];
				}
				this.mescroll = mescroll
				this.$api.sendRequest({
					url:'/fenxiao/api/Fission/detail ',
					data: {
						page: mescroll.num,
						page_size: mescroll.size,
						is_settlement: this.is_settlement,
					},
					async: true,
					success: res => {
						if (res.code == 0) {
							this.info.unsettled = res.data.data.unsettled
							this.info.settled = res.data.data.settled
							
							let newArr = [];
							newArr = res.data.list;
							mescroll.endSuccess(newArr.length);
							if (mescroll.num == 1) this.listData = []; //如果是第一页需手动制空列表
							this.listData = this.listData.concat(newArr); //追加新数据
							mescroll.endBySize(this.listData.length, res.data.count)
						} else {
							// this.$util.showToast({
							// 	title: res.message
							// });
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail:res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.fission_reward_details {
		.head_view {
			height: 480rpx;
			background: linear-gradient(180deg, rgba(199, 159, 69, 0.75) 0%, #F5F5F5 100%);

			.menuView {
				padding: 30rpx 30rpx 0rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.settl_view {
					width: 47%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					position: relative;

					.triangle {
						border-left: 30rpx solid transparent;
						border-right: 30rpx solid transparent;
						border-top: 20rpx solid #C79F45;
						/*我们一般根据方向来写三角形，这样容易记忆；箭头指向的反方向的颜色设置为你想要的，然后箭头方向不要写，另外两个方向的颜色设置为transperent透明*/
						position: absolute;
						bottom: -20rpx;
						left: 50%;
						margin-left: -20rpx;
					}

					&.native {
						height: 132rpx;
						background: #C79F45;
						border: 2rpx solid #C79F45;
						border-radius: 16rpx;
					}

					&.normal {
						height: 130rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
					}

					.money {
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #463510;
						line-height: 50rpx;
					}

					.num {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						line-height: 33rpx;

						&.native {
							color: #463510;
						}

						&.normal {
							color: #909399;
						}
					}
				}
			}
		}
		.content{
			padding: 0rpx 30rpx;
			.item{
				background: #fff;
				margin-bottom: 20rpx;
				border-radius: 8rpx;
				padding: 14rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.info_view{
					display: flex;
					image{
						width: 72rpx;
						height: 72rpx;
						border-radius: 36rpx;
					}
					.view1{
						margin-left: 12rpx;
						.info_name{
							margin-top: 4rpx;
							font-size: 32rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #303133;
							line-height: 40rpx;
						}
						.info_up{
							margin-top: 5rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #909399;
							line-height: 34rpx;
							word-wrap: break-word;
							word-break: break-all;
							white-space: pre-line;

						}
					}
				}
				.reward_view{
					.money_view{
						text-align: right;
						font-size: 32rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #C79F45;
						line-height: 45rpx;
					}
					.time_view{
						margin-top: 4rpx;
						text-align: right;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #909399;
						line-height: 34rpx;
					}
				}
			}	
		}
	}
</style>
